<template>
  <div>
    <div class="switch-box">
        <div class="switch-wrap">
          <div
            class="switch-item"
            :class="{'switch-item-on': selectTab == index}"
            @click.stop="changeTabs(item, index)"
            v-for="(item, index) in dragramTypeList"
            :key="item.lgid + index"
          >
              <span v-lang="{lang: controlSto.language, lgid: item.lgid}">{{ item.tname }}</span>
          </div>
        </div>
      </div>
      <div class="switch-cont-box" v-if="selectTab == 0">
        <div v-if="typeGraph == 2">
          <NetworkGraphDb :dbData="dbData" :landNum="landNum" :loadingNetWork="loadingNetWork" :noDataFlag="noDataFlag"/>
        </div>
        <NetworkGraph
          v-else
          :graphRange="graphRange"
          :diagramLenList="diagramLenList"
          :maxRange="maxRange"
          @changeSlider="changeSlider"
          @changeShow="changeShow"
          :dataGraph="dataGraph"
          :linksGraph="linksGraph"
          :deepLinks="cloneDeep(linksGraph)"
          :loadingNetWork="loadingNetWork"
          :noDataFlag="noDataFlag"
        />
        <!-- <uiEchart :config="hotmapOpt" ref="hotmapChart" :vt="echartoptVt"/> -->
      </div>
      <div class="switch-cont-box" v-if="selectTab == 1">
        <div class="hot-map-box" v-show="!loadingNetWork && !noDataFlag">
          <uiEchart style="width:1100px;height:360px;"  :config="hotmapOpt" id="hotmapEchart" ref="hotmapChart" :vt="echartoptVt"/>
          <div class="load-cont-box">
            <div class="load-cont">
                <div class="filter-cont" @click="dowmImage">
                    <div class="img-wrap">
                        <el-image class="load-img show-img" :src="loadImg" fit="contain" />
                        <el-image class="load-img hover-img" :src="loadhoverImg" fit="contain" />
                        <el-image class="load-img active-img" :src="loadactiveImg" fit="contain" />
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="no-data-box" v-show="loadingNetWork">
          <img :src="Loading"/>
          <div class="no-data-txt" v-lang="{lang: controlSto.language, lgid: '-131'}">loading...</div>
        </div>
        <div class="no-data-box" v-show="!loadingNetWork && noDataFlag">
          <img :src="NodtaPng"/>
          <div class="no-data-txt" v-lang="{lang: controlSto.language, lgid: '-118'}">暂无数据</div>
        </div>
      </div>
      <div class="switch-cont-box" v-if="selectTab == 2">
        <div class="condition-box">
            <div class="condition-left"></div>
            <div class="condition-right">
                <SearchLoad :type="uiCodeDowm" :para="para"/>
            </div>
        </div>
        <uiTable 
          :key="dataTable.dTablevt"
          :loading="loading"
          :config="dataTable.tableConfig"
          :columnConfig="dataTable.columnConfig" 
          :templateList ='templateList'
          :data="dataTable.dataList">
          <template #[item.idField]="{ row }" v-for="(item, index) in templateList" :key="item + row.idField">
              <el-tooltip placement="top" :content="row[item.idField]" v-if="row[item.idField] && row[item.idField].length > 20">
                <div class="jump-box table-jump-name" @click.stop="toClkItem(row, index)"><span>{{row[item.idField]}}</span></div>
              </el-tooltip>
              <div v-else>
                <div class="jump-box" @click.stop="toClkItem(row, index)"><span>{{row[item.idField]}}</span></div>
              </div>
          </template>
        </uiTable>
        <div class="page-box" v-if="condPage.total > 10">
            <uiPagination
                :total="condPage.total" :pageSize="condPage.pageSize" :pageIndex="condPage.pageIndex"
                @onSizeChange="chgSize" @onCurrentChange="chgCurrnt"/>
        </div>
      </div>
  </div>
</template>

<script setup>
import { computed, reactive, toRefs, ref, watch, nextTick } from 'vue'
import uiTable from '@/components/ui-table.vue'
import uiEchart from '@/components/ui-echart.vue'
import NetworkGraph from '@/components/NetworkGraph.vue'
import NetworkGraphDb from '@/components/NetworkGraphDb.vue'
import loadImg from '@/assets/img/load.png'
import loadhoverImg from '@/assets/img/load-hover.png'
import loadactiveImg from '@/assets/img/load-active.png'
import Loading from '@/assets/img/loading.gif'
import NodtaPng from '@/assets/img/noData.png'
import { graph, heatmapdata, xLand, yLand, nData } from '@/utils/datagraph'
import { calculateEquilateralTriangleCoords, saveImageWithWhiteBackground, langTxt, getFilterThArr, getFilterLangArr } from '@/utils/util'
import { debounce, cloneDeep, concat, filter, uniqBy } from 'lodash'
import { controlStore } from '@/stores/control'
const props = defineProps({
  condPage: {
    type: Object,
    default: () => {}
  },
  dragramTypeList: {
    default: () => [],
    type: Array
  },
  selectTab: {
    default: 0,
    type: [Number, String]
  },
  diagramLenList: {
    default: () => [],
    type: Array
  },
  typeGraph: {
    default: 1,
    type: [Number, String]
  },
  graphRange: {
    default: [0, 20],
    type: Array
  },
  maxRange: {
    default: 40,
    type: Number
  },
  dataGraph: {
    default: () => [],
    type: Array
  },
  linksGraph: {
    default: () => [],
    type: Array
  },
  dbData: {
    type: Array,
    default: () => []
  },
  dataTable: {
    type: Object,
    default: () => {}
  },
  uiCodeDowm: {
    type: String,
    default: ''
  },
  hotMapX: {
    type: Array,
    default: () => []
  },
  hotMapY: {
    type: Array,
    default: () => []
  },
  hotMapData: {
    type: Array,
    default: () => []
  },
  hotMaxRange: {
    default: 10,
    type: Number
  },
  templateList: {
    type: Array,
    default: () => []
  },
  para: {
    type: Object,
    default: () => {}
  },
  landNum: {
    default: 8,
    type: Number
  },
  loading: {
    default: true,
    type: Boolean
  },
  loadingNetWork: {
    type: Boolean,
    default: false
  },
  noDataFlag: {
    type: Boolean,
    default: true
  }
})
const {dragramTypeList, selectTab, dataGraph,
  linksGraph, diagramLenList, graphRange,
  dataTable, hotMapX, hotMapY, hotMapData, hotMaxRange, templateList, uiCodeDowm, landNum} = toRefs(props);
// const graphCanvas = ref(null);
const hotmapChart = ref(null);
const echartoptVt = new Date().valueOf(); 
// const graphRange = ref([0, 40])
const emitter = defineEmits(['changeTabs', 'changeShow', 'changeSlider', 'toClkItem', 'chgCurrnt', 'chgSize'])
// let linksList = cloneDeep(graph.links)
// let _linksList = cloneDeep(graph.links) //保持不变的数据
const changeSlider = (e) => {
  emitter('changeSlider', e)
}

const hotmapOpt = computed(() => {
        const option = {
            tooltip: {
                position: 'top',
                formatter: function (params) {
                    // params 是包含当前数据信息的对象
                    if (params.componentType === 'series') {
                        // 如果鼠标在 series 上（即 heatmap 本身）
                        const xAxisName = hotmapOpt.value.xAxis.data[params.value[0]];
                        const yAxisName = hotmapOpt.value.yAxis.data[params.value[1]];
                        const value = params.value;
                        return `X: ${xAxisName}<br>Y: ${yAxisName}<br>Distance: ${value[2]}`;
                    }
                }
            },
            grid: {
                // height: '50%',
                top: '10%',
                right: '0'
            },
            xAxis: {
                type: 'category',
                data: hotMapX.value,
                splitArea: {
                  show: true
                },
                axisLabel: {
                  interval:0,
                  rotate:-90
                }
            },
            yAxis: {
                type: 'category',
                data: hotMapX.value,
                splitArea: {
                show: true
                }
            },
            visualMap: {
                min: 0,
                max: hotMaxRange.value,
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                top: '0',
                color: [ '#ECDAA3', '#CB4042']
                // inverse: true
            },
            series: [
                {
                name: '',
                pointSize: 10, // 设置热力图上点的大小
                symbolSize: 200,
                type: 'heatmap',
                data: hotMapData.value,
                label: {
                    show: true
                },
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                label: {
                    show: false // 不显示数据值
                }
                }
            ]
        }
        return option;
    })
const controlSto = controlStore();
const changeTabs = (item, index) => {
  emitter('changeTabs', item, index)
  if (index == 1) {
    nextTick(() => {
      hotmapOpt.value.xAxis.data = hotMapX.value;
      hotmapOpt.value.yAxis.data = hotMapY.value;
      hotmapOpt.value.series[0].data = hotMapData.value;
      hotmapChart.value.initEchart();
    })
  }
}
const changeShow = (item, index, isShow) => {
  // changelen(item)
  emitter('changeShow', item, index, isShow)
}
const toClkItem = (row, index) => {
  emitter('toClkItem', row, index)
}
const dowmImage = () => {
  const canvas = document.querySelector('#hotmapEchart canvas');
  saveImageWithWhiteBackground(canvas)  
}
const chgCurrnt = (e) => {
    emitter('chgCurrnt', e)
};
const chgSize = (e) => {
  emitter('chgSize', e)
};
watch(() => hotMapX.value, (n, v) => {
  if (n != v) {
    nextTick(() => {
      hotmapChart.value ? hotmapChart.value.initEchart() : '';
     })
  }
})
defineExpose({
  
})
</script>

<style scoped lang="scss">
.switch-box {
  padding-bottom: 32px;
  text-align: center;
  .switch-wrap {
    display: inline-block;
    border: 1px solid #BC9F77;
    border-radius: 30px;
    font-size: 0;
    color: #967846;
    .switch-item {
      display: inline-block;
      height: 40px;
      width: 200px;
      padding: 0 32px;
      line-height: 40px;
      border-right: 1px solid #BC9F77;
      font-weight: 600;
      font-size: 18px;
      cursor: pointer;
      &:first-child {
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
      }
      &:last-child {
        border-right: none;
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
      }
      &.switch-item-on {
        color: #fff;
        background-color: #BC9F77;
      }
    }
  }
}
.switch-cont-box {
  // max-height: 500px;
  // overflow: scroll;
  .no-data-box {
    width: 100%;
    height: 264px;
    text-align: center;
    position: relative;
    img {
        margin-top: 20px;
    }
    .no-data-txt {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #BC9F77;
        line-height: 20px;
        text-align: center;
        font-style: normal;
        position: absolute;
        width: 100%;
        bottom: 60px;
    }
  }
  .table-jump-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .page-box {
    margin: 10px 0;
  }
  .condition-box {
      display: flex;
      padding: 0 0 16px;
      justify-content: space-between;
      .condition-right {
          .ipt-cont {
              display: inline-block;
              padding-right: 16px;
              .ipt-search {
                  // width: 300px;
              }
          }
          .search-item {
              margin-right: 16px;
          }
      }
  }
  .graph-equila {
    height: 360px;
  }
  .hot-map-box {
    height: 360px;
    position: relative;
    padding: 12px 0;
    .load-cont-box {
        position: absolute;
        text-align: right;
        right: 0;
        top: 0;
        .load-cont {
          // display: -webkit-inline-box;
          width: 44px;
          height: 32px;
          padding: 0 6px 0 8px;
          line-height: 32px;
          text-align: center;
          border: 1px solid #BC9F77;
          border-radius: 4px;
          color: #BC9F77;
          user-select: none;
          cursor: pointer;
          &:hover {
              color: #E6C896;
              .hover-img {
                  display: inline-block;
              }
              .show-img, .active-img {
                  display: none;
              }
          }
          &:active {
              color: #967846;
              .active-img {
                  display: inline-block;
              }
              .hover-img, .show-img {
                  display: none;
              }
          }
          .hover-img, .active-img {
              display: none;
          }
          .img-wrap {
              position: relative;
              display: inline-block;
              top: 2px;
              .load-img {
                  height: 16px;
              }
          }
          .arrow-box {
              padding-left: 6px;
          }
        }
      }
  }
}
</style>

<style lang="scss">
  .db-top-lf {
    .el-slider__runway {
      background: #E4E7ED;
      // height: 32px;
      position: relative;
      .el-slider__bar {
        background: #BC9F77;
        // height: 40px;
        position: absolute;
        // top: -8px;
      }
      .el-slider__button {
        width: 20px;
        height: 20px;
        background: #FFFFFF;
        border: 1px solid #BC9F77;
      }
      .el-slider__button-wrapper {
        // margin-top: 10px;
      }
    }
  }
</style>